<template>
  <div class="knowledge-view">
    <!-- 头部横幅 -->
    <div class="knowledge-header">
      <div class="header-bg">
        <img src="../assets/科技数码展宣传图.jpg" alt="知识专题" class="header-image">
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">知识宝库</h1>
        <p class="header-subtitle">探索科学奥秘，拓展认知边界</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="knowledge-content">
      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 科学探索 -->
        <div v-if="activeTab === 'science'" class="science-section">
          <div class="section-header">
            <h2 class="section-title">🔬 科学探索</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="knowledge-videos-grid">
            <div 
              v-for="video in scienceVideos" 
              :key="video.id"
              class="knowledge-video-card"
              @click="playVideo(video)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="video-image">
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-category">{{ video.category }}</span>
                  <span class="video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 人文历史 -->
        <div v-if="activeTab === 'history'" class="history-section">
          <div class="section-header">
            <h2 class="section-title">🏛️ 人文历史</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="knowledge-videos-grid">
            <div 
              v-for="video in historyVideos" 
              :key="video.id"
              class="knowledge-video-card"
              @click="playVideo(video)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="video-image">
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-category">{{ video.category }}</span>
                  <span class="video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 教育学习 -->
        <div v-if="activeTab === 'education'" class="education-section">
          <div class="section-header">
            <h2 class="section-title">📚 教育学习</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="knowledge-videos-grid">
            <div 
              v-for="video in educationVideos" 
              :key="video.id"
              class="knowledge-video-card"
              @click="playVideo(video)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="video-image">
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-category">{{ video.category }}</span>
                  <span class="video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 生活百科 -->
        <div v-if="activeTab === 'encyclopedia'" class="encyclopedia-section">
          <div class="section-header">
            <h2 class="section-title">📝 生活百科</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="knowledge-videos-grid">
            <div 
              v-for="video in encyclopediaVideos" 
              :key="video.id"
              class="knowledge-video-card"
              @click="playVideo(video)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="video-image">
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-category">{{ video.category }}</span>
                  <span class="video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KnowledgeView',
  data() {
    return {
      // 标签页数据
      tabs: [
        { key: 'science', name: '科学探索' },
        { key: 'history', name: '人文历史' },
        { key: 'education', name: '教育学习' },
        { key: 'encyclopedia', name: '生活百科' },
      ],
      activeTab: 'science',
      
      // 科学探索视频数据
      scienceVideos: [
        { id: 1, title: '宇宙奥秘：黑洞是如何形成的？', thumbnail: '/src/assets/周杰伦.png', duration: '15:30', category: '天文学', views: 5800000, likes: 420000 },
        { id: 2, title: '量子力学入门：观察者效应的奥秘', thumbnail: '/src/assets/悟空.jpg', duration: '22:45', category: '物理学', views: 4300000, likes: 310000 },
        { id: 3, title: '人类基因组计划：我们了解自己多少？', thumbnail: '/src/assets/黑悟空.jpg', duration: '18:20', category: '生物学', views: 3700000, likes: 280000 },
        { id: 4, title: '人工智能的未来：会超越人类吗？', thumbnail: '/src/assets/周杰伦.png', duration: '25:10', category: '计算机科学', views: 8900000, likes: 650000 },
        { id: 5, title: '气候变化：科学证据与未来预测', thumbnail: '/src/assets/悟空.jpg', duration: '20:45', category: '环境科学', views: 6700000, likes: 490000 },
        { id: 6, title: '相对论通俗解释：时间为什么会变慢？', thumbnail: '/src/assets/黑悟空.jpg', duration: '17:20', category: '物理学', views: 7500000, likes: 530000 },
      ],
      
      // 人文历史视频数据
      historyVideos: [
        { id: 11, title: '秦始皇兵马俑：世界第八大奇迹的秘密', thumbnail: '/src/assets/周杰伦.png', duration: '28:30', category: '中国历史', views: 9200000, likes: 780000 },
        { id: 12, title: '罗马帝国的兴衰：从崛起到灭亡', thumbnail: '/src/assets/悟空.jpg', duration: '35:45', category: '世界历史', views: 6500000, likes: 480000 },
        { id: 13, title: '丝绸之路：连接东西方的黄金通道', thumbnail: '/src/assets/黑悟空.jpg', duration: '24:20', category: '历史文化', views: 5800000, likes: 420000 },
        { id: 14, title: '文艺复兴：欧洲思想解放的开端', thumbnail: '/src/assets/周杰伦.png', duration: '31:10', category: '西方文化', views: 4700000, likes: 350000 },
        { id: 15, title: '唐朝盛世：中国古代文明的巅峰', thumbnail: '/src/assets/悟空.jpg', duration: '29:45', category: '中国历史', views: 7600000, likes: 610000 },
        { id: 16, title: '工业革命：改变世界的力量', thumbnail: '/src/assets/黑悟空.jpg', duration: '33:20', category: '世界历史', views: 6200000, likes: 460000 },
      ],
      
      // 教育学习视频数据
      educationVideos: [
        { id: 21, title: '高效学习方法：如何提高记忆力', thumbnail: '/src/assets/周杰伦.png', duration: '19:30', category: '学习技巧', views: 12500000, likes: 980000 },
        { id: 22, title: '编程入门：零基础学Python', thumbnail: '/src/assets/悟空.jpg', duration: '45:45', category: '编程教育', views: 8900000, likes: 670000 },
        { id: 23, title: '英语口语提升：日常对话练习', thumbnail: '/src/assets/黑悟空.jpg', duration: '22:20', category: '语言学习', views: 7600000, likes: 540000 },
        { id: 24, title: '数学思维训练：从基础到进阶', thumbnail: '/src/assets/周杰伦.png', duration: '38:10', category: '数学教育', views: 5300000, likes: 390000 },
        { id: 25, title: '职场技能提升：高效沟通技巧', thumbnail: '/src/assets/悟空.jpg', duration: '26:45', category: '职场教育', views: 9800000, likes: 720000 },
        { id: 26, title: '科学实验：在家也能做的物理小实验', thumbnail: '/src/assets/黑悟空.jpg', duration: '21:20', category: '科学教育', views: 6700000, likes: 480000 },
      ],
      
      // 生活百科视频数据
      encyclopediaVideos: [
        { id: 31, title: '健康饮食指南：如何科学搭配一日三餐', thumbnail: '/src/assets/周杰伦.png', duration: '24:30', category: '健康生活', views: 8500000, likes: 630000 },
        { id: 32, title: '家居收纳技巧：让你的空间变大两倍', thumbnail: '/src/assets/悟空.jpg', duration: '18:45', category: '生活技巧', views: 7200000, likes: 540000 },
        { id: 33, title: '常见疾病预防：提高免疫力的方法', thumbnail: '/src/assets/黑悟空.jpg', duration: '29:20', category: '健康知识', views: 9600000, likes: 780000 },
        { id: 34, title: '投资理财入门：普通人如何理财', thumbnail: '/src/assets/周杰伦.png', duration: '35:10', category: '财经知识', views: 10300000, likes: 890000 },
        { id: 35, title: '急救知识：关键时刻能救命的技能', thumbnail: '/src/assets/悟空.jpg', duration: '22:45', category: '安全知识', views: 11500000, likes: 920000 },
        { id: 36, title: '植物养护指南：让绿植长久存活', thumbnail: '/src/assets/黑悟空.jpg', duration: '17:20', category: '生活技巧', views: 5800000, likes: 410000 },
      ],
    }
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 播放视频
    playVideo(video) {
      console.log('播放视频:', video.title)
      // 实际应用中，这里应该跳转到视频播放页面
      // this.$router.push(`/video/${video.id}`);
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 知识页面整体样式 */
.knowledge-view {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部横幅样式 */
.knowledge-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.knowledge-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.knowledge-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 标签页导航 */
.tab-navigation {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-item:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.tab-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* 标签页内容 */
.tab-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 知识视频网格布局 */
.knowledge-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* 知识视频卡片样式 */
.knowledge-video-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.knowledge-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  overflow: hidden;
}

.video-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.knowledge-video-card:hover .video-image {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 15px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.video-category {
  background-color: var(--hover-color);
  color: var(--primary-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.video-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .knowledge-videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
  
  .tab-navigation {
    flex-wrap: wrap;
  }
  
  .tab-item {
    flex: 0 0 calc(50% - 10px);
    margin: 5px;
  }
}
</style>